<template>
  <div class="waterfall-wrapper">
    <ul class="left-waterfall" ref="left">
      <li class="item" v-for="(item, index) in leftItems" v-bind:style=" {height:item.height+'px'}">
        <router-link tag="div" :to="{path: '/discover/detail', query:{id: item.pid}}">
          <img :src="item.pimg" alt />
          <p>{{item.pdesc}}</p>
          <p>{{item.pname}}</p>
        </router-link>
      </li>
    </ul>
    <ul class="right-waterfall" ref="right">
      <li
        class="item"
        v-for="(item, index) in rightItems"
        v-bind:style=" {height:item.height+'px'}"
      >
        <router-link tag="div" :to="{path: '/discover/detail', query:{id: item.pid}}">
          <img :src="item.pimg" alt />
          <p>{{item.pdesc}}</p>
          <p>{{item.pname}}</p>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import * as api from "../api/getProlist";
export default {
  name: "float",
  data() {
    return {
      data: [],
      leftItems: [],
      rightItems: [],
      page: "6"
    };
  },
  mounted() {
    // TODO GET DISPLAY_DATA
    //      this.$axios({
    //      url:"http://api.cat-shop.penkuoer.com/api/v1/products",
    //      params:{per:30,page:1}
    //  }).then((dd)=>{
    //      this.data=dd.data.products
    //     this.updateWaterfall()
    //  })

    // },

    api.getProd({ pclass: "3" }).then(da => {
      this.data = da.data.result;
      // console.log(da.data.result);
      this.updateWaterfall();
    });
  },

  methods: {
    updateWaterfall() {
      const leftHeight = this.$refs.left.clientHeight;
      const rightHeight = this.$refs.right.clientHeight;
      let item = this.data.shift();
      if (item == null) {
        return;
      }
      if (leftHeight >= rightHeight) {
        this.rightItems.push(item);
      } else {
        this.leftItems.push(item);
      }
      this.$nextTick(function() {
        this.updateWaterfall();
      });
    }
  }
};
</script>

<style  scoped>
ul {
  width: 336px;
}
ul.left-waterfall {
  float: left;
  margin-left: 28px;
}

ul.right-waterfall {
  float: right;
  margin-right: 28px;
}

li.item {
  width: 100%;
}
li.item img {
  width: 100%;
}
</style>